<template>
  <div class="light-input" contenteditable="true" v-html="content.url" @input="changeText"></div>
</template>
<script>
export default {
  name: 'LightInput',
  props: {
    content: {
      type: Object
    }
  },
  computed: {
    url: function () {
      console.log(this.content.url.replace(/<[\w\W]+?>/ig, ""))
      return this.content.url.replace(/<[\w\W]+?>/ig, "")
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.content.keyword.forEach(v => {
        if (this.content.url.indexOf(`${v}`) > -1) {
          let a = this.content.url.replace(/<[\w\W]+?>/ig,"")
          this.content.url = a.replace(`${v}`, `<span class="key-word">${v}</span>`)
          console.log(`${v}`, this.content.url)
        }
      })
    })
  },
  methods: {
    changeText () {
      this.content.url = this.$el.innerHTML
      this.content.keyword.forEach(v => {
        this.content.url = this.content.url.replace(/<[\w\W]+?>/ig,"")
        if (this.content.url.indexOf(`${v}`) > -1) {
          let a = this.content.url
          this.content.url = a.replace(/\[地址参数\]/g, `<span class="key-word">${v}</span>`)
          console.log(`${v}`, this.content.url)
        }
      })
    }
  }
}
</script>
<style lang="scss">
.light-input {
  height: 25px;
  line-height: 25px;
  padding-left: 20px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  white-space: nowrap;
  overflow: auto;
  &::-webkit-scrollbar {
    height: 5px;
  }
  &:focus {
    outline: none;
  }
  .key-word {
    font-weight: bold;
    color: teal;
  }
}
</style>
